<template>
  <van-notify id="van-notify" />
  <view :class="$style.operation_feedback">
    <view :class="$style.feedback_group">
      <view :class="$style.feedback_list" v-for="(item, index) in gasAlertList" :key="index">
        <view :class="$style.feedback_label">{{ item.label }}</view>
        <view :class="$style.feedback_label_group">
          <view :class="$style.it_group" v-for="(it, index) in item.list" :key="index">
            <view :class="$style.it_mc" @click="getDistortActive(it)">{{ it.mc }}</view>
            <image v-show="gasAlarmCurrent == it.zt" :src="gxImg" alt="" />
          </view>
        </view>
      </view>

      <view :class="$style.feedback_list" v-for="(item, index) in placeList" :key="index" v-show="gasAlarmCurrent == 1">
        <view :class="$style.feedback_label">{{ item.label }}</view>
        <view :class="$style.feedback_label_group">
          <view :class="$style.it_group" v-for="(it, index) in item.list" :key="index">
            <view :class="$style.it_mc" @click="getPlaceActive(it)">{{ it.mc }}</view>
            <image v-show="placeCurrent == it.zt" :src="gxImg" alt="" />
          </view>
        </view>
      </view>

      <view :class="$style.feedback_list" v-for="(item, index) in pipelinePressureList" :key="index"
        v-show="placeCurrent == 1 && gasAlarmCurrent == 1">
        <view :class="$style.feedback_label">{{ item.label }}</view>
        <view :class="$style.feedback_label_group">
          <view :class="$style.it_group" v-for="(it, index) in item.list" :key="index">
            <view :class="$style.it_mc" @click="getPipelineActive(it)">{{ it.mc }}</view>
            <image v-show="pipelinePressureCurrent == it.zt" :src="gxImg" alt="" />
          </view>
        </view>
      </view>


      <view :class="$style.feedback_list" v-for="(item, index) in layingMethodList" :key="index"
        v-show="placeCurrent == 1 && gasAlarmCurrent == 1">
        <view :class="$style.feedback_label">{{ item.label }}</view>
        <view :class="$style.feedback_label_group">
          <view :class="$style.it_group" v-for="(it, index) in item.list" :key="index">
            <view :class="$style.it_mc" @click="getLayingActive(it)">{{ it.mc }}</view>
            <image v-show="layingMethodCurrent == it.zt" :src="gxImg" alt="" />
          </view>
        </view>
      </view>

      <view :class="$style.feedback_list" v-for="(item, index) in airSeedList" :key="index"
        v-show="gasAlarmCurrent == 1">
        <view :class="$style.feedback_label">{{ item.label }}</view>
        <view :class="$style.feedback_label_group">
          <view :class="$style.it_group" v-for="(it, index) in item.list" :key="index">
            <view :class="$style.it_mc" @click="getAirActive(it)">{{ it.mc }}</view>
            <image v-show="airSeedCurrent == it.zt" :src="gxImg" alt="" />
          </view>
        </view>
      </view>



    </view>

    <view :class="$style.feedback_footer">
      <view :class="$style.footer_qxxg" @click="cancelAlertModify">取消修改</view>
      <view :class="$style.footer_tjxg" @click="setAlertModify">提交修改</view>
    </view>
  </view>
</template>

<script setup lang='ts'>
import { onMounted, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { postGasAlertState, queryGasReport } from "@/api";
import gxImg from "@/static/images/chat/gx.png";
import { getLocal } from '@/utils'
import Notify from "../../../wxcomponents/@vant/weapp/notify/notify"

const placeCurrent = ref<any>(-1)
const airSeedCurrent = ref<any>(-1)
const pipelinePressureCurrent = ref<any>(-1)
const layingMethodCurrent = ref<any>(-1)
const gasAlarmCurrent = ref<any>(-1)

const cs = ref<any>();
const fsfs = ref<any>();
const gdyl = ref<any>();
const qz = ref<any>();
const sfwrqjq = ref<any>();
const jqId = ref<string>('')
onLoad((options: any) => {
  jqId.value = options.jqId
})

const gasAlertList: any = [
  {
    label: '是否为燃气警情',
    list: [
      {
        mc: '是',
        zt: 1,
      },
      {
        mc: '否',
        zt: 0,
      },
    ]
  },

];

const placeList: any = [
  {
    label: '发生场所',
    list: [
      {
        mc: '场站',
        zt: 0,
      },
      {
        mc: '管道',
        zt: 1,
      },
      {
        mc: '用户',
        zt: 2,
      },
      {
        mc: '非燃气类',
        zt: 3,
      },

    ]
  },

];

const airSeedList: any = [

  {
    label: '气种',
    list: [
      {
        mc: '天然气',
        zt: 0,
      },
      {
        mc: '人工煤气',
        zt: 1,
      },
      {
        mc: '液化石油气',
        zt: 2,
      },
    ]
  },
];
const pipelinePressureList: any = [
  {
    label: '管道压力',
    list: [
      {
        mc: '高压管',
        zt: 0,
      },
      {
        mc: '中压管',
        zt: 1,
      },
      {
        mc: '低压管',
        zt: 2,
      },
    ]
  },
]
const layingMethodList: any = [
  {
    label: '敷设方式',
    list: [
      {
        mc: '地上',
        zt: 0,
      },
      {
        mc: '地下',
        zt: 1,
      },
    ]
  },
]

function getPlaceActive(it: any) {
  if (placeCurrent.value !== it.zt) {
    placeCurrent.value = it.zt
    cs.value = it.zt
  } else if (placeCurrent.value == it.zt) {
    placeCurrent.value = -1
  }
}
function getAirActive(it: any) {
  if (airSeedCurrent.value !== it.zt) {
    airSeedCurrent.value = it.zt
    qz.value = it.zt
  } else if (airSeedCurrent.value == it.zt) {
    airSeedCurrent.value = -1
  }
}
function getPipelineActive(it: any) {
  if (pipelinePressureCurrent.value == it.zt) {
    pipelinePressureCurrent.value = -1
  } else if (pipelinePressureCurrent.value !== it.zt) {
    pipelinePressureCurrent.value = it.zt
    gdyl.value = it.zt
  }

}
function getLayingActive(it: any) {
  if (layingMethodCurrent.value == it.zt) {
    layingMethodCurrent.value = -1
  } else if (layingMethodCurrent.value !== it.zt) {
    layingMethodCurrent.value = it.zt
    fsfs.value = it.zt
  }
}
function getDistortActive(it: any) {
  if (gasAlarmCurrent.value == it.zt) {
    gasAlarmCurrent.value = -1
  } else if (gasAlarmCurrent.value !== it.zt) {
    gasAlarmCurrent.value = it.zt
    sfwrqjq.value = it.zt
  }
}
function setAlertModify() {
  let params: object = {
    sbryid: getLocal('openid') || '',
    jqid: jqId.value,
    cs: cs.value,
    fsfs: fsfs.value,
    gdyl: gdyl.value,
    qz: qz.value,
    sfwb: sfwrqjq.value,
  }
  postGasAlertState(params).then((res: any) => {
    Notify({ type: 'success', message: '修改成功' });
  }).catch((e: any) => {
    Notify({ type: 'warning', message: '修改失败' });
  })

}

function cancelAlertModify() {
  getList()
};

function getList() {
  let params = {
    ajxxId: jqId.value
  }
  queryGasReport(params).then((res: any) => {
    placeCurrent.value = Number(res.data.cs)
    layingMethodCurrent.value = Number(res.data.fsfs)
    pipelinePressureCurrent.value = Number(res.data.gdyl)
    airSeedCurrent.value = Number(res.data.qz)
    gasAlarmCurrent.value = Number(res.data.sfwb)

  })
}

onMounted(() => {
  getList()
});

</script>

<style lang='less' module>
.operation_feedback {
  position: relative;
  width: 100vw;

  .feedback_group {
    height: calc(100vh - 170rpx);
    overflow: overlay;
    padding: 35rpx;
    box-sizing: border-box;

    .feedback_list {
      margin-bottom: 20rpx;

      .feedback_label {
        font-size: 28rpx;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        height: 60rpx;
        line-height: 60rpx;
      }

      .it_group {
        padding: 0 20rpx;
        box-sizing: border-box;
        border-bottom: 1rpx solid #D9D9D9;
        font-size: 30rpx;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        height: 80rpx;
        line-height: 80rpx;
        position: relative;

        .it_mc {}

        image {
          width: 40rpx;
          height: 40rpx;
          position: absolute;
          right: 20rpx;
          top: 20rpx;
        }
      }

      .it_group:last-child {
        border-bottom: none;
      }
    }
  }

  .feedback_label_group {
    width: 680rpx;
    min-height: 160rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.2);
    border-radius: 20rpx;
  }

  .feedback_footer {
    display: flex;
    align-items: center;
    align-self: center;
    width: 100%;
    height: 165rpx;
    background: #FFFFFF;
    box-shadow: 0px 4px 19px 1px rgba(51, 51, 51, 0.2);
    justify-content: space-between;
    padding: 20rpx;
    box-sizing: border-box;

    .footer_qxxg {
      width: 320rpx;
      height: 80rpx;
      background: rgba(86, 120, 244, 0.1);
      border-radius: 40rpx;
      font-size: 30rpx;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #5678F4;
      line-height: 80rpx;
      text-align: center;
    }

    .footer_tjxg {
      width: 320rpx;
      height: 80rpx;
      background: linear-gradient(129deg, #5678F4 0%, #FF0020 100%);
      border-radius: 40rpx;
      font-size: 30rpx;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 80rpx;
      text-align: center;
    }
  }
}
</style>
